<template>
  <div class="home">
    <HeaderBanner class="layout-header"/>
    <div class="container">
      <LeftSide class="layout-left"/>
      <Main class="layout-main"/>
    </div>
  </div>
</template>

<script>
import HeaderBanner from 'components/header-banner'
import LeftSide from 'components/left-side'
import Main from 'components/main'
export default {
  components: {
    HeaderBanner,
    LeftSide,
    Main
  }
}
</script>


<style lang="scss" scoped>
$height: 60px;
$left-width: 240px;
.home{
  height: 100%;
  width: 100%;
  .layout-header{
    height: $height;
    background: $bg-primary;
  }
  .container{
    display: flex;
    height: calc(100% - #{$height});
  }
  .layout-left{
    width: $left-width;
    height: 100%;
    overflow-y: auto;
  }
  .layout-main{
    padding: 0 10px;
    height: 100%;
    overflow: auto;
    flex: 1;
    background: #f5f5f5;
  }
}
</style>
